<template>
  <div class="plat-form-container">
    <div class="dierect-booking">
      <AnnularChartDir></AnnularChartDir>
    </div>
    <div class="ota">
      <AnnularChartOta></AnnularChartOta>
    </div>
    <div class="222">
      <AnnularChartSocial></AnnularChartSocial>
    </div>
    <div class="info-plat">
      <AnnularChartInfo></AnnularChartInfo>
    </div>
  </div>
</template>
<script>
import AnnularChartDir from "@views/home/components/echarts/DoughnutChart/components/AnnularChartDir.vue";
import AnnularChartOta from "@views/home/components/echarts/DoughnutChart/components/AnnularChartOta.vue";
import AnnularChartSocial from "@views/home/components/echarts/DoughnutChart/components/AnnularChartSocial.vue";
import AnnularChartInfo from "@views/home/components/echarts/DoughnutChart/components/AnnularChartInfo.vue";
export default {
  components: {
    AnnularChartDir,
    AnnularChartOta,
    AnnularChartSocial,
    AnnularChartInfo,
  },
};
</script>
<style lang="scss" scoped>
.plat-form-container {
  height: 3.0625rem;
  display: flex;
  align-items: center;
  margin-top: 20px;
  justify-content: space-between;
  // 为了让子元素之间有8px间距，可以设置子元素的 margin-right 为 8px
  > div {
    height: 100%;
    margin-right: 8px;
    // 使用 flex: 1 让剩余空间合理分配给子元素
    flex: 1;
    // 可以根据需要设置子元素的其他样式
    background: #fff;
    border: 1px solid #cdcccc;
    border-radius: 8px;
  }
  > div:last-child {
    margin-right: 0; // 最后一个子元素不需要右边距
  }
}
</style>
